<template>
    <div class="container">
        <div class="header-box">
            <div class="header-box-logo">
                <img :src="credit.BusinessLogo" />
            </div>
            <div class="header-box-text">
                <h3>{{credit.Theme}}</h3>
                <p>{{credit.ThemeTime}}</p>
                <p>{{credit.Adress}}</p>
            </div>
        </div>
        <div class="sign-form">
            <van-cell-group>
                <div class="sign-num">
                    <van-cell title="已选会议" :value="'x'+num+'场'" />
                </div>
            <van-field
                v-model="userInfo.Name"
                required
                label="姓名"
                input-align="right"
                placeholder="请输入姓名"
            />
            <div class="file-image">
                <van-cell title="头像" is-link required value="点击上传" @click="showFileModel">
                    <img id="img" class="preview-image" v-if="userInfo.HeadImage!=''" :src="userInfo.HeadImage">
                </van-cell>
            </div>
            <van-cell title="性别" required>
                    <van-radio-group v-model="userInfo.Sex">
                        <van-radio name="男">男</van-radio>
                        <van-radio name="女">女</van-radio>
                    </van-radio-group>
                </van-cell>
                <van-field
                v-model="userInfo.Country"
                required
                label="国家/地区"
                input-align="right"
                placeholder="请选择所在国家或地区"
                readonly
                icon="arrow"
                @click-icon="showCoutryPicker"
                @click="showCoutryPicker"
            />
            <van-field
              v-if="userInfo.Country=='中国大陆'"
                v-model="userInfo.ProvinceCityDistrict"
                required
                label="省/市/区"
                input-align="right"
                placeholder="请选择所在省市区"
                readonly
                icon="arrow"
                @click-icon="showAreaPicker"
                @click="showAreaPicker"
            />
            <van-field
                v-model="certificateType"
                required
                label="证件类型"
                input-align="right"
                placeholder="请选择证件类型"
                readonly
                icon="arrow"
                @click-icon="showCertiPicker"
                @click="showCertiPicker"
            />
            <van-field
                v-model="userInfo.IDCard"
                required
                label="证件号"
                input-align="right"
                placeholder="请输入证件号"
            />
            <van-field
                v-model="userInfo.Phone"
                required
                label="手机号"
                input-align="right"
                placeholder="请输入手机号"
            />
            <van-field
    v-model="userInfo.VerifyVode"
    required
    center
    clearable
    label="验证码"
    input-align="right"
    placeholder="请输入验证码"
  >
    <van-button slot="button" size="small" type="primary" :disabled="btnDisabled" @click="getCode">{{btnText}}</van-button>
  </van-field>
            <van-field
                v-model="userInfo.Email"
                required
                label="邮箱"
                input-align="right"
                placeholder="请输入邮箱号"
            />
            <van-field
                v-model="userInfo.Company"
                required
                label="单位"
                input-align="right"
                placeholder="请输入单位"
            />
            <div class="company-tips" v-if="companyTips.length>0">
              <div class="tips-item" v-for="(item,index) in companyTips" :key="index" @click="getTaxNum(item)">{{item.corpname}}</div>
            </div>
            <van-field
                v-model="userInfo.TaxNumber"
                label="税号(需要开发票的必填)"
                input-align="right"
                placeholder="请输入税号"
            />
            <van-field
                v-model="userInfo.Post"
                required
                label="职务"
                input-align="right"
                placeholder="请输入职务"
            />
            <van-field
                v-model="userInfo.Title"
                label="职称"
                input-align="right"
                placeholder="请输入职称"
            />
            <van-cell title="是否洽谈" required>
                    <van-radio-group v-model="userInfo.IsMatchMaking">
                        <van-radio :name="true">是</van-radio>
                        <van-radio :name="false">否</van-radio>
                    </van-radio-group>
                </van-cell>
                <div class="company-text" v-if="userInfo.IsMatchMaking">
                <van-cell title="单位简介（300字以内）" required />
                <textarea v-model="userInfo.AboutUs" maxlength="300" placeholder="请输入单位简介"></textarea>
            </div>
                <van-cell title="是否饮食禁忌">
                    <van-radio-group v-model="userInfo.IsDietary">
                        <van-radio :name="true">是</van-radio>
                        <van-radio :name="false">否</van-radio>
                    </van-radio-group>
                </van-cell>
                <van-field
                v-if="userInfo.IsDietary"
                v-model="userInfo.DietaryTaboos"
                label="饮食禁忌"
                input-align="right"
                placeholder="请输入饮食禁忌"
            />
            </van-cell-group>
        </div>
        <!-- 提交表单 -->
        <div class="bottom-submit">
            <div class="total-price">合计：<span>￥ 0</span></div>
            <van-button type="primary" :disabled="submitDisabled" @click="submitUserInfo">确定</van-button>
        </div>
        <!-- 上传图片 -->
        <van-actionsheet v-model="fileModel">
                <div class="actionsheet-title">请上传头像</div>
                <div class="actionsheet-row">
                    <span>从相册中选择</span>
                    <input type="file" accept="image/*" @change="fileChange">
                </div>
                <div class="actionsheet-row">
                    <span>拍照</span>
                    <input type="file" capture="camera" accept="image/*" @change="fileChange">
                </div>
                <div class="actionsheet-close" @click="fileToggle(0)">取消</div>
            </van-actionsheet>
            <!-- 国家、地区选择器 -->
            <van-popup v-model="countryPicker" position="bottom">
                <van-picker show-toolbar :columns="countryArry" @cancel="countryCancel" @confirm="countryConfirm" />
            </van-popup>
            <!-- 选择省市区 -->
            <van-popup v-model="areaPicker" position="bottom">
                <van-area :area-list="areaList" :columns-num="3" title="选择省市区"  @cancel="areaCancel" @confirm="areaConfirm" />
            </van-popup>
            <!-- 选择证件类型 -->
            <van-popup v-model="certificatePicker" position="bottom">
                <van-picker show-toolbar :columns="certificateList" @cancel="certiCancel" @confirm="certiConfirm" />
            </van-popup>
    </div>
</template>

<script>
import axios from 'axios'
import areaData from '../../static/js/area.js'
export default {
  name: 'signUp',
  data () {
    return {
      fileModel: false,
      countryPicker: false,
      areaPicker: false,
      certificatePicker: false,
      areaList: areaData,
      btnText: '发送验证码',
      btnDisabled: false,
      submitDisabled: false,
      certificateList: [
        { text: '身份证', value: 'IDCard' },
        { text: '港澳台证', value: 'HongKongMacaoAndTaiwan' },
        { text: '护照', value: 'Passport' }
      ],
      countryArry: [
        { text: '中国大陆', value: '中国大陆' },
        { text: '中国香港', value: '中国香港' },
        { text: '中国澳门', value: '中国澳门' },
        { text: '中国台湾', value: '中国台湾' },
        { text: '墨西哥', value: '墨西哥' },
        { text: '巴西', value: '巴西' },
        { text: '南非', value: '南非' },
        { text: '印度', value: '印度' },
        { text: '俄罗斯', value: '俄罗斯' },
        { text: '新加坡', value: '新加坡' },
        { text: '泰国', value: '泰国' },
        { text: '马来西亚', value: '马来西亚' },
        { text: '印度尼西亚', value: '印度尼西亚' },
        { text: '巴基斯坦', value: '巴基斯坦' },
        { text: '菲律宾', value: '菲律宾' },
        { text: '波兰', value: '波兰' },
        { text: '其他国家和地区', value: '其他国家和地区' }
      ],
      credit: {},
      subPrecticeId: null,
      num: 0,
      certificateType: '',
      companyTips: [],
      isChecked: false,
      userInfo: {
        ST: '',
        // 姓名
        Name: '',
        // 性别
        Sex: '男',
        // 国家/地区
        Country: '',
        // 省/市
        ProvinceCityDistrict: '',
        // 证件类型
        CertificateTypeEnum: '',
        // 证件号
        CertificateNum: '',
        // 身份证号
        IDCard: '',
        // 手机
        Phone: '',
        // 验证码
        VerifyVode: '',
        // 邮箱
        Email: '',
        // 单位
        Company: '',
        // 税号
        TaxNumber: '',
        // 单位简介
        AboutUs: '',
        // 职务
        Post: '',
        // 职称
        Title: '',
        // 主要业务
        Business: '',
        // 是否洽谈
        IsMatchMaking: true,
        // 交通信息
        FerryBus: '',
        // 住宿信息
        HotelInfoID: '',
        // 入住时间
        CheckInDate: '',
        // 离开时间
        CheckOutDate: '',
        // 饮食是否禁忌
        IsDietary: false,
        // 饮食禁忌
        DietaryTaboos: '',
        // 头像
        HeadImage: '',
        // 是否广告看板
        IsAdvertising: true
      }
    }
  },
  created () {
    this.userInfo.ST = this.$route.query.st
    this.subPrecticeId = this.$route.query.subPrecticeId
    this.num = this.$route.query.num
    var that = this
    axios({
      url: that.baseUrl + '/api/exhibition/getCredit/' + that.$route.query.st,
      method: 'GET'
    })
      .then(res => {
        // console.log(res)
        that.credit = res.data
      })
      .catch(err => {
        console.log(err)
      })
  },
  methods: {
    showFileModel () {
      this.fileModel = true
    },
    fileToggle (state) {
      if (state) {
        this.fileModel = true
      } else {
        this.fileModel = false
      }
    },
    fileChange (e) {
      this.fileModel = false
      // var that = this
      let image = document.getElementById('img')
      this.clip(e, {
        resultObj: image,
        aspectRatio: 1
      })
      // var reader = new FileReader()
      // var imgSize = e.target.files[0].size
      // reader.readAsDataURL(e.target.files[0])
      // reader.onload = function (e) {
      //   var dataURL = e.target.result
      //   if (imgSize > 1024 * 1024) {
      //     var imaged = new Image()
      //     imaged.src = dataURL
      //     imaged.onload = function () {
      //       var canvas = document.createElement('canvas')
      //       var ctx = canvas.getContext('2d')
      //       var w = 0
      //       var h = 0
      //       if (this.width > this.height) {
      //         h = 1000
      //         var scale = this.width / this.height
      //         h = h > this.height ? this.height : h
      //         w = h * scale
      //       } else {
      //         w = 1000
      //         //   var scale = this.width / this.height
      //         w = w > this.width ? this.width : w
      //         h = w / scale
      //       }
      //       var anw = document.createAttribute('width')
      //       var anh = document.createAttribute('height')
      //       anw.value = w
      //       anh.value = h
      //       canvas.setAttributeNode(anw)
      //       canvas.setAttributeNode(anh)
      //       ctx.drawImage(this, 0, 0, w, h)
      //       dataURL = canvas.toDataURL('image/jpeg')
      //       that.userInfo.HeadImage = dataURL
      //     }
      //   } else {
      //   that.userInfo.HeadImage = dataURL
      //   }
      // }
    },
    showCoutryPicker () {
      this.countryPicker = true
    },
    countryCancel () {
      this.countryPicker = false
    },
    countryConfirm (value, index) {
      this.userInfo.Country = value.text
      this.countryPicker = false
    },
    showAreaPicker () {
      this.areaPicker = true
    },
    areaCancel () {
      this.areaPicker = false
    },
    areaConfirm (value) {
      // console.log(value)
      this.userInfo.ProvinceCityDistrict =
        value[0].name + ' ' + value[1].name + ' ' + value[2].name
      this.areaPicker = false
    },
    showCertiPicker () {
      this.certificatePicker = true
    },
    certiCancel () {
      this.certificatePicker = false
    },
    certiConfirm (value) {
      this.certificatePicker = false
      this.userInfo.CertificateTypeEnum = value.value
      this.certificateType = value.text
    },
    getCode () {
      var that = this
      if (/^1[345678]\d{9}$/.test(that.userInfo.Phone)) {
        axios({
          method: 'GET',
          url:
            that.baseUrl +
            '/api/exhibition/getVerifyVode/' +
            that.userInfo.Phone
        })
          .then(res => {
            // console.log(res)
            var second = 60
            that.btnDisabled = true
            that.btnText = '还剩' + second + '秒'
            var timer = setInterval(() => {
              second--
              if (second > 0) {
                that.btnText = '还剩' + second + '秒'
              } else {
                clearInterval(timer)
                that.btnDisabled = false
                that.btnText = '发送验证码'
                second = 60
              }
            }, 1000)
          })
          .catch(err => {
            console.log(err)
          })
      } else {
        this.$toast('请输入正确的手机号')
      }
    },
    submitUserInfo () {
      this.submitDisabled = true
      var that = this
      // console.log(this.userInfo)
      axios({
        method: 'POST',
        url: that.baseUrl + '/api/exhibition/SubmitUserInfo',
        contentType: 'application/json; charset=utf-8',
        data: that.userInfo
      })
        .then(res => {
          if (res.data.State) {
            that.submitDisabled = false
            window.location.href =
              '#/state?number=' +
              res.data.Data +
              '&st=' +
              that.userInfo.ST
          } else {
            that.$toast(res.data.Message)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    trims (str) {
      return str.replace(/(^\s*)|(\s*$)/g, '')
    },
    getTaxNum (item) {
      var that = this
      axios({
        method: 'GET',
        url:
            'https://fapiao.yonyoucloud.com/taxinfo/detail-byid?corpid=' + item.companyid
      })
        .then(res => {
          // console.log(res)
          if (res.data.code === '0000' && res.data.datas != null) {
            that.isChecked = true
            that.userInfo.Company = item.corpname
            if (res.data.datas.creditcode == null) {
              that.userInfo.TaxNumber = ''
            } else {
              that.userInfo.TaxNumber = res.data.datas.creditcode
            }
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    companyPrompt (val) {
      var that = this
      axios({
        method: 'GET',
        url:
            'https://fapiao.yonyoucloud.com/taxinfo/autoComplete?mc=' +
            encodeURIComponent(val)
      })
        .then(res => {
          if (res.data.code === '0000' && res.data.datas != null) {
            if (res.data.datas.length > 5) {
              that.companyTips = res.data.datas.slice(0, 5)
            } else {
              that.companyTips = res.data.datas
            }
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  },
  watch: {
    'userInfo.Phone': function (val, oldVal) {
      if (this.trims(val).length > 11) {
        this.userInfo.Phone = val.slice(0, 11)
      }
    },
    'userInfo.IDCard': function (val, oldVal) {
      if (this.trims(val).length > 18) {
        this.userInfo.IDCard = val.slice(0, 18)
      }
    },
    'userInfo.Company': function (val, oldVal) {
      if (!this.isChecked && this.trims(val).length > 1) {
        this.companyPrompt(this.trims(val))
      } else {
        this.companyTips = []
        this.isChecked = false
      }
    }
  }
}
</script>

<style>
@import '../assets/css/sign.css';
@import "../assets/css/clipper.css";
</style>
